<template>
  <el-dialog
    :title="!dataForm.id ? '新建' : '报告详情'"
    :close-on-click-modal="false"
    append-to-body
    :visible.sync="visible"
    lock-scroll
    width="40%"
  >
    <el-row :gutter="15" class="" v-loading="loading">
      <el-form
        ref="elForm"
        :model="dataForm"
        :rules="rules"
        size="small"
        label-width="150px"
        label-position="right"
      >
        <template>
          <el-col :span="24">
            <el-form-item label="委托单位名称" prop="customerName">
              <div>{{ dataForm.customerName }}</div>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="发起人员" prop="nickName">
              <div>{{ dataForm.nickName }}</div>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="报告类型" prop="planBeginTime">
              <div v-if="dataForm.planBeginTime">
                {{ dataForm.planBeginTime.split("-")[0] }}年{{
                  dataForm.planBeginTime.split("-")[1]
                }}月维保报告
              </div>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="提交时间" prop="createTime">
              <div>{{ dataForm.createTime }}</div>
            </el-form-item>
          </el-col>
          <!-- <el-col :span="24">
            <el-form-item label="存在问题与诊断建议" prop="">

            </el-form-item>
          </el-col> -->
          <!-- 合格不展示 -->
          <el-col :span="24" v-if="dataForm.passStatus != 1">
            <el-form-item label="存在问题与诊断建议" prop="reportDefectList">
              <el-table :data="dataForm.reportDefectList">
                <el-table-column label="维护保养内容" align="center" prop="systemName">
                  <template slot-scope="scope">
                    <el-tooltip class="item" effect="dark" placement="top">
                      <div slot="content" style="width: 20rem">
                        {{ scope.row.systemName }}
                      </div>
                      <div class="ellipsisList">{{ scope.row.systemName }}</div>
                    </el-tooltip>
                  </template>
                </el-table-column>
                <el-table-column label="设备" align="center" prop="systemDeviceName" />
                <el-table-column label="检查项" align="center" prop="deviceItemName" />
                <el-table-column label="现场存在问题" align="center" prop="content">
                  <template slot-scope="scope">
                    <el-tooltip class="item" effect="dark" placement="top">
                      <div slot="content" style="width: 20rem">
                        {{ scope.row.content }}
                      </div>
                      <div class="ellipsisList">{{ scope.row.content }}</div>
                    </el-tooltip>
                  </template>
                </el-table-column>
                <el-table-column label="地址" align="center" prop="buildingFloorName" />
                <el-table-column label="现场照片" align="center" prop="photo">
                  <template slot-scope="scope">
                    <!-- <el-avatar icon="el-icon-user-solid" size="small" style="margin-right: 0.5rem;"
                      :src="getUrl(scope.row.photo)"></el-avatar> -->
                    <ImagePreview
                      :src="scope.row.photo"
                      :width="40"
                      :height="40"
                      v-if="scope.row.photo"
                    />
                    <div v-else>--</div>
                  </template>
                </el-table-column>
                <el-table-column label="备注" align="center" prop="remark">
                  <template slot-scope="scope">
                    <el-tooltip class="item" effect="dark" placement="top">
                      <div slot="content" style="width: 20rem">
                        {{ scope.row.remark }}
                      </div>
                      <div class="ellipsisList">{{ scope.row.remark }}</div>
                    </el-tooltip>
                  </template>
                </el-table-column>
                <el-table-column
                  label="操作"
                  align="center"
                  class-name="small-padding fixed-width"
                >
                  <template slot-scope="scope">
                    <el-button
                      size="mini"
                      type="text"
                      icon="el-icon-more"
                      @click="handleUpdate(scope.row, 1)"
                      v-if="dataForm.status == 2"
                      >详情</el-button
                    >
                    <el-button
                      size="mini"
                      type="text"
                      icon="el-icon-edit"
                      @click="handleUpdate(scope.row, 2)"
                      v-else
                      >修改</el-button
                    >
                  </template>
                </el-table-column>
              </el-table>
            </el-form-item>
          </el-col>
        </template>
      </el-form>
    </el-row>
    <span slot="footer" class="dialog-footer">
      <el-button @click="visible = false"> 取 消</el-button>
      <!-- <el-button type="primary" @click="dataFormSubmit()" :loading="btnLoading"> 确 定</el-button> -->
    </span>
    <DetailUpdate
      v-if="detailUpdateVisible"
      ref="DetailUpdate"
      @refreshDetailList="refreshDetailList"
    />
  </el-dialog>
</template>
<script>
import { getEnterpriseInfo, putEnterprise } from "@/api/enterprise/index";
import { getOrgReport, getOrgAppReport } from "@/api/system/report";
import { getDicts as getDicts } from "@/api/system/dict/data";
import DetailUpdate from "./detail-update.vue";
export default {
  dicts: ["sys_normal_disable", "sys_user_sex"],
  components: { DetailUpdate },
  data() {
    return {
      dataFormSubmitType: 0,
      continueBtnLoading: false,
      index: 0,
      visible: false,
      loading: false,
      btnLoading: false,
      detailUpdateVisible: false,
      dataForm: {},
      // 高德
      openMap: false,
      dialogMapVisible: false,
      map: "",
      longitude: 104.065837,
      latitude: 30.657349,
      markerTool: "",
      lng: "",
      lat: "",
      mapText: "",
      rules: {},
      enterpriseIndustryList: [],
      enterpriseTypeList: [],
    };
  },
  methods: {
    clearData() {
      this.dataForm.customerName = "";
      this.dataForm.nickName = "";
      this.dataForm.planBeginTime = "";
      this.dataForm.createTime = "";
      this.dataForm.reportDefectList = [];
    },
    init(id) {
      this.dataForm.id = id || 0;
      this.visible = true;
      this.clearData();
      this.$nextTick(() => {
        if (this.dataForm.id) {
          this.loading = true;
          getOrgAppReport(id).then((res) => {
            this.dataForm = res.data;
            this.loading = false;
          });
        }
      });
    },
    // 表单提交
    dataFormSubmit(type) {
      this.$refs["elForm"].validate((valid) => {
        if (valid) {
          this.btnLoading = true;
          putEnterprise(this.dataForm).then((res) => {
            this.visible = false;
            this.btnLoading = false;
            this.$emit("refreshList", true);
          });
        }
      });
    },
    // 跳转详情
    handleUpdate(row, ids) {
      this.detailUpdateVisible = true;
      this.$nextTick(() => {
        this.$refs.DetailUpdate.init(row, ids);
      });
    },

    getUrl(url) {
      if (url) {
        let arr = url.split(",");
        return process.env.VUE_APP_WEBSC_API + arr[0];
      }
    },
    refreshDetailList() {
      this.detailUpdateVisible = false;
      this.$nextTick(() => {
        this.loading = true;
        getOrgAppReport(this.dataForm.id).then((res) => {
          this.dataForm = res.data;
          this.loading = false;
        });
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.ellipsisList {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  /* 控制最多显示3行文字 */
  overflow: hidden;
  text-overflow: ellipsis;
}

#allMap {
  width: 100%;
  height: 450px;
}

.inMapSty {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 999999;
  opacity: 0.8;
  display: flex;
  height: 36px;
}
</style>
